<template>
  <div class="task_form_creat">
    <el-form ref="form" :model="value" label-width="80px">
      <el-form-item label="任务名称">
        <el-input v-model="value.name" />
      </el-form-item>
      <el-form-item label="接受人">
        <el-select v-model="value.people" placeholder="请选择接受人" multiple clearable value-key="id" filterable>
          <el-option v-for="(item,index) in userList" :key="index" :label="item.true_name" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="value.note"
          type="textarea"
          autosize
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="上传文件">
        <el-upload
          multiple
          action="#"
          :auto-upload="false"
          :on-remove="del"
          :on-change="change"
          :file-list="fileList"
        >
          <el-button type="primary">
            上传文件
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fileReject } from '@/utils/utils';
export default {
  name: 'TaskFormCreat',
  props: {
    value: {
      default: () => ({}),
      type: Object
    },
    userList: {
      default: () => ([]),
      type: Array
    }
  },
  data() {
    return {
      fileList: []
    };
  },
  watch: {
    fileList: {
      deep: true,
      immediate: true,
      handler: function(arr) {
        this.value.fileList = arr;
      }
    }
  },
  methods: {
    del(_, fileList) {
      this.fileList = fileList;
    },
    change(file) {
      // const list = [];
      // fileList.forEach(item => {
      //   if (item.size === 0) {
      //     this.$message.error(`${item.name}文件内容不能为空`);
      //   } else {
      //     const strArr = item.name.split('.');
      //     const fileType = strArr[strArr.length - 1];
      //     if (fileReject.includes(fileType)) {
      //       this.$message.warning('不支持上传' + fileType + '类型的文件..');
      //     } else {
      //       list.push(item);
      //     }
      //   }
      // });
      // this.fileList = list;
      if (file.size === 0) {
        this.$message.error(`${file.name}文件内容不能为空`);
      } else {
        const strArr = file.name.split('.');
        const fileType = strArr[strArr.length - 1];
        if (fileReject.includes(fileType)) {
          this.$message.warning('不支持上传' + fileType + '类型的文件..');
        } else {
          this.fileList.push(file);
        }
      }
    },
    clearFileList() {
      this.fileList = [];
    }
  }

};
</script>

<style>

</style>
